<template>
  <div class="petition">
    <template v-if="type===1">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="信访人姓名" prop="name" />
        <el-table-column label="责任主体" prop="address" />
        <el-table-column label="人员类型" prop="type" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </template>
    <template v-if="type===3">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="户籍地及住址" prop="address" />
        <el-table-column label="责任单位" prop="responsibleUnit" />
        <el-table-column label="稳控单位" prop="stabilityControlUnit" />
        <el-table-column label="备注" prop="remarks" />
      </el-table>
    </template>
    <template v-if="type===2">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="住址" prop="address" />
        <el-table-column label="责任单位" prop="duty" />
        <el-table-column label="稳控单位" prop="stabilize" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
    </template>
    <template v-if="type===4">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="联系电话" prop="phone" />
        <el-table-column label="居住地址" prop="address" />
        <el-table-column label="所属警务区" prop="stabilize" />
        <el-table-column label="责任民警" prop="police" />
      </el-table>
    </template>
    <template v-if="type===5">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="性别" prop="sex" />
        <el-table-column label="现住地址" prop="address" />
        <el-table-column label="监护人姓名" prop="guardianName" />
        <el-table-column label="监护人电话" prop="guardianPhone" />
        <el-table-column label="所在学校" prop="school" />
        <el-table-column label="所在班级" prop="grades" />
      </el-table>
    </template>
    <template v-if="type===6">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="姓名" prop="name" />
        <el-table-column label="性别" prop="sex" />
        <el-table-column label="居住地址" prop="address" />
        <el-table-column label="联系电话" prop="phone" />
        <el-table-column label="现实状况" prop="reality" />
      </el-table>
    </template>
    <template v-if="type===20||type===21||type===22||type===23">
      <el-table :data="source" height="700px" row-class-name="table-row" cell-class-name="table-cell" header-row-class-name="table-header-row" header-cell-class-name="table-header-cell">
        <el-table-column label="场所名称" prop="name" />
        <el-table-column label="场所类型" prop="type" />
        <el-table-column label="标准地址" prop="address" />
        <el-table-column label="从业人员数" prop="number" />
        <el-table-column label="管辖单位名称" prop="police_area" />
        <el-table-column label="运营状态" prop="status" />
      </el-table>
    </template>
   
  </div>
</template>
<script>
import {
  EMPTY_NESTERS,
  LEFT_BEHIND_CHILDREN,
  SZQ_KEY_PERSONNEL_OF_GUANGXIA_POLICE,
  SZQ_KEY_PERSONNEL_OF_LETTERS_AND_VISITS,
  QS_KEY_PERSONNEL_OF_GUANGXIA_POLICE,
  INDUSTRY_SITES,
  PARTY_AND_GOVERNMENT_ORGANS,
  SCHOOL_DATA,
  OWNED_ENTERPRISE_UNIT,
  SZQ_KEY_PETITIONERS
} from "@/utils/data";

export default {
  name: "Petition",
  props: ['type'],
  computed: {
    source() {
      switch (this.type) {
        case 1:
          return QS_KEY_PERSONNEL_OF_GUANGXIA_POLICE;
        case 2:
          return SZQ_KEY_PERSONNEL_OF_LETTERS_AND_VISITS;
        case 3:
          return SZQ_KEY_PETITIONERS;
        case 4:
          return SZQ_KEY_PERSONNEL_OF_GUANGXIA_POLICE;
        case 5:
          return LEFT_BEHIND_CHILDREN;
          case 6:
            return EMPTY_NESTERS;
        case 20:
          return INDUSTRY_SITES;
        case 21:
          return PARTY_AND_GOVERNMENT_ORGANS;
        case 22:
          return SCHOOL_DATA;
        case 23:
          return OWNED_ENTERPRISE_UNIT;
        default:
          return [];
      }
    }
  }
}
</script>
<style lang="scss">
.petition{
  .el-table{
    background: none !important;
  }
  .el-table::before{
    height: 0;
  }
  .el-table__cell.gutter{
    display: none;
  }
  .el-table__body-wrapper{
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: rgba(0,198,255,.3);
    }
    &::-webkit-scrollbar-track{
      border-radius: 3px;
      background: rgba(0,24,48,.3);
    }
  }
  .table-header-row,.table-header-cell{
    background-color: rgba(10, 167, 255, 0.15)!important;
    color: #fff;
    border: none !important;
  }
  .table-row{
    background: rgba(10, 167, 255, 0.05);
    &:hover{
      background: rgba(10, 167, 255, 0.13) !important;
      .table-cell{
        background: rgba(10, 167, 255, 0.13) !important;
      }
    }
  }
  .table-row:nth-child(odd){
    background: rgba(10, 167, 255, 0.1);
  }
  .table-cell{
    color: #fff;
    border: none !important;
  }
}
</style>
<style scoped lang="scss">
.petition {
  width: 100%;
  height: 700px;
}
</style>
